
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="terminal.css" media="screen" rel="stylesheet" type="text/css" />
<!--        <style>
            body, html{
                width:100%;
                height:100%;
            }
            #appterminal {
                width:100%;
                height:100%;
                white-space: nowrap;
                overflow-x: hidden;
                overflow-y: auto;
                color: #28fe14;
                background-color: #1b2224;

            }
            #appterminal .line{
                width:100%;
                height:20px;
                line-height:1;
                margin: 0px;
                padding: 0px;
            }
            #appterminal textarea{
                position:relative;
                top: 10px;
                width:200px;


                background: transparent;
                border:0 none;
                color:white;
                height:20px;
                overflow: hidden;

                line-height: 1;
                vertical-align: baseline;
                resize: none;
            }
            #appterminal textarea:focus{
                outline: 0 none;
            }
        </style>-->
        <script src="avalon.js">

        </script>
        <script>
            var username = "<b>{{username}}:&nbsp&nbsp;</b>"



            var model = avalon.define("appterminal", function(vm) {
                vm.message = [username + "<textarea ms-duplex='newMessage'  id='textarea' autofocus ms-on-scroll='scroll'></textarea>"]
                vm.newMessage = ""
                vm.username = "rubylouvre"
                vm.$watch("newMessage", function(a) {
                    //  avalon.log(a)
                    //在这里处理语法高亮
                })
                vm.maxLines = 40
                vm.command = ""
                vm.scroll = function() {
                    var msg = vm.newMessage
                    vm.command += msg
                    vm.newMessage = ""
                    vm.message.set(vm.message.length - 1, username + msg.slice(0, -1))

                    //https://github.com/alexdunphy/flexText/blob/master/jquery.flexText.js
                    vm.message.push('<textarea ms-duplex="newMessage" id="textarea" autofocus  ms-on-overflow="scroll"></textarea>')

                    vm.newMessage = msg.slice(-1)
                    model.textarea = document.getElementById("textarea")
                    model.textarea.focus()

                }
                vm.$skipArray = ["textarea", "command"]
                vm.textarea = {}
            
                vm.input = function(e) {

                    if (e.which === 13 || e.which === 108) {
                        var msg = vm.newMessage
                        vm.newMessage = ""
                        vm.message.set(vm.message.length - 1, username + msg)
                        var command = vm.command || msg
                        //command将发给后端
                        vm.command = ""
                        //在这里面把数据抛给后端
                        vm.message.push(msg, username + '<textarea ms-duplex="newMessage" id="textarea" autofocus ms-on-overflow="scroll"></textarea>')
                        if (vm.message.length >= vm.maxLines) {
                            vm.message.unshift()
                        }

                    }
                }
            })
            require("ready!", function() {
                var height = avalon(document.getElementById("appterminal")).height()
                model.maxLines = Math.floor(height / 20) - 1
            })


        </script>
    </head>
    <body>
        <div id="appterminal" ms-controller="appterminal" ms-each="message" ms-keyup="input" >
            <div class="line">{{el|html}}</div>
        </div>
    </body>
</html>
